<template>
    <footer class="bg-white mt-5 dark:bg-stone-950 sticky top-full ">
        <div class="flex flex-col items-center justify-between">
            <!-- 一言 -->
            <div class="flex mt-6 items-center justify-between">
                <el-tooltip :content="yiyan.from" placement="bottom">
                    <span class="dark:text-gray-400">{{ yiyan.hitokoto }}
                    </span>
                </el-tooltip>
            </div>
            <!-- 版权说明 -->
            <div class="flex md:items-center   justify-between flex-col  py-6 px-4 ">
                <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400"> © 2023 - {{ thisYear }} 「{{ days
                    }}」
                    <a href="https://www.magictodo.cn/" class="hover:underline">www.magictodo.cn </a>
                    &nbsp;<a href="https://www.magictodo.cn/" class="hover:underline">个人博客仅做学习交流使用</a> ✪ ω ✪
                    &nbsp;All Rights Reserved.
                </span>
                <ul
                    class="flex md:items-center items-start flex-col mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
                    <li>
                        感谢<a href="https://www.openfrp.net/" class="mr-1 ml-1 hover:underline">openfrp</a>
                        <a href="https://www.xiaomiqiu.cn/" class="mr-1 ml-1 hover:underline">小米球Ngrok</a> 提供的内网穿透服务
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import axios from 'axios';


//博客建设时间
let startDate = new Date('2023-11-27');
// 现在时间
let thisDate = new Date();
let thisYear = thisDate.getFullYear();
// 相差天数
let days = Math.floor((thisDate - startDate) / (24 * 3600 * 1000));

const yiyan = reactive({
    hitokoto: '',
    from: ''
});

onMounted(() => {
    axios.get('https://v1.hitokoto.cn')
        .then(response => {
            yiyan.hitokoto = response.data.hitokoto;
            yiyan.from = "--" + response.data.from;
        })
        .catch(error => {
            console.error(error);
        });
});

</script>